<template>
  <div class="map-chart-container">
    <div ref="chart" class="chart" />
  </div>
</template>

<script>
import * as echarts from 'echarts'
import 'echarts/map/js/china'

export default {
  data() {
    return {
      chartData: [
        { name: '北京', value: 290 },
        { name: '天津', value: 120 },
        { name: '上海', value: 400 },
        { name: '重庆', value: 240 },
        { name: '河北', value: 230 },
        { name: '河南', value: 330 },
        { name: '云南', value: 90 },
        { name: '辽宁', value: 210 },
        { name: '黑龙江', value: 120 },
        { name: '湖南', value: 320 },
        { name: '安徽', value: 210 },
        { name: '山东', value: 390 },
        { name: '新疆', value: 70 },
        { name: '江苏', value: 360 },
        { name: '浙江', value: 310 },
        { name: '江西', value: 230 },
        { name: '湖北', value: 270 },
        { name: '广西', value: 180 },
        { name: '甘肃', value: 80 },
        { name: '山西', value: 150 },
        { name: '内蒙古', value: 170 },
        { name: '陕西', value: 220 },
        { name: '吉林', value: 60 },
        { name: '福建', value: 250 },
        { name: '贵州', value: 120 },
        { name: '广东', value: 660 },
        { name: '青海', value: 10 },
        { name: '西藏', value: 5 },
        { name: '四川', value: 310 },
        { name: '宁夏', value: 20 },
        { name: '海南', value: 40 },
        { name: '台湾', value: 10 }
      ]
    }
  },

  mounted() {
    this.chart = echarts.init(this.$refs.chart)
    this.initChart()
  },

  methods: {
    initChart() {
      const option = {
        title: {
          text: '中国地图',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        geo: {
          map: 'china',
          roam: false,
          label: {
            show: false
          },
          itemStyle: {
            areaColor: 'orange',
            borderColor: '#111'
          }
        },
        series: [
          {
            type: 'scatter',
            coordinateSystem: 'geo',
            symbol: 'circle',
            symbolSize: 10,
            label: {
              show: true,
              fontSize: 8,
              fontFamily: 'microsoft yahei',
              formatter: (params) => {
                if (['海口', '台北'].includes(params.data.name)) {
                  return params.data.name
                } else {
                  return ''
                }
              }
            },
            itemStyle: {
              color: '#00CAFF',
              shadowBlur: 16,
              shadowColor: '#00CAFF'
            },
            data: this.chartData
          }
        ]
      }
      this.chart.setOption(option)
    }
  }
}
</script>

<style scoped>
.map-chart-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.chart {
  width: 600px;
  height: 400px;
}
</style>
